<template>
  <div>
    <el-dialog v-model="timeDialogVisible" title="提示" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="开始时间">
          <el-input v-model="form.startTime" style="width: 80%" />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-input v-model="form.endTime" style="width: 80%" />
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="timeDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
      </template>
    </el-dialog>
    <el-table :data="timeData" border style="width: 100%" stripe>
      <el-table-column prop="section" label="课程节次"/>
      <el-table-column prop="startTime" label="开始时间"/>
      <el-table-column prop="endTime" label="结束时间"/>
      <el-table-column prop="options" label="操作" width="120px">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "TimeArrangement",
  components:{
  },
  data(){
    return {
      form:{},
      timeData:[
        {
          section:1,
          startTime:"8:00",
          endTime:"8:45"
        },
        {
          section:2,
          startTime:"8:55",
          endTime:"9:40"
        },
        {
          section:3,
          startTime:"9:55",
          endTime:"10:40"
        },
        {
          section:4,
          startTime:"10:50",
          endTime:"11:35"
        },
        {
          section:5,
          startTime:"11:45",
          endTime:"12:30"
        },
        {
          section:6,
          startTime:"13:30",
          endTime:"14:15"
        },
        {
          section:7,
          startTime:"14:25",
          endTime:"15:10"
        },
        {
          section:8,
          startTime:"15:25",
          endTime:"16:10"
        },
        {
          section:9,
          startTime:"16:20",
          endTime:"17:05"
        },
        {
          section:10,
          startTime:"17:15",
          endTime:"18:00"
        },
        {
          section:11,
          startTime:"18:30",
          endTime:"19:15"
        },
        {
          section:12,
          startTime:"19:25",
          endTime:"20:10"
        },
        {
          section:13,
          startTime:"20:20",
          endTime:"21:05"
        }
      ],

      timeDialogVisible:false,
      activeNames:[],
      activatedTables:[],
    }
  },
  created() {
    this.load()
    this.activeNames = []
  },
  methods:{
    load(){
      this.activeNames = [];
      this.activatedTables = []
    },
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row))
      this.timeDialogVisible = true
    },
    save(){
      // ToDo:url待补充
      request.put("http://124.70.179.188:8082/", this.form).then(res =>{
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "修改成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.message
          })
        }
        this.load() // 刷新表格数据
        this.timeDialogVisible = false // 关闭弹窗
      })
    }
  }
}
</script>

<style scoped>

</style>